<script setup lang="ts"></script>
<template>
  <div class="login-wrapper">
    <div class="form-wrapper">
      <div class="form-title">用户登录</div>
      <ElForm label-width="100px">
        <ElFormItem label="账 号:">
          <ElInput></ElInput>
        </ElFormItem>
        <ElFormItem label="密 码:">
          <ElInput></ElInput>
        </ElFormItem>
        <ElFormItem label="验证码:" class="captcha-form">
          <div class="captcha container-flex">
            <ElInput></ElInput>
            <ElImage></ElImage>
          </div>
        </ElFormItem>
      </ElForm>
      <div class="login-button-wrapper">
        <ElButton type="primary">进入</ElButton>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login-wrapper {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(26deg, #14d3f450 50%, #93bee380 50%);
  position: relative;
  .form-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .form-title {
      margin-bottom: 20px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(45deg, #14d3f4 50%, #93bee3 50%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    .captcha-form {
      ::v-deep(.el-form-item__content) {
        width: 100%;
      }
      .captcha {
        width: 100%;
        ::v-deep(.el-input) {
          flex: 1;
        }
        ::v-deep(.el-image) {
          width: 30%;
          margin-left: 10px;
        }
      }
    }
  }
  .login-button-wrapper {
    text-align: center;
    ::v-deep(.el-button) {
      width: 30%;
      height: 36px;
      font-size: 20px;
      letter-spacing: 5px;
    }
  }
}
</style>
